<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建演练计划' : isDetail ? '详情' : '评价'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="120px" label-position="right" :disabled="!!isDetail" :rules="rules">
		
				<el-col :span="12">
					<el-form-item label="演练名称" prop="ylmc" required >
						<el-input v-model="dataForm.ylmc" :disabled="showji" placeholder="请输入演练名称" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="演练地点" prop="yldd" required >
						<el-input v-model="dataForm.yldd" :disabled="showji"  placeholder="请输入演练地点" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="主办部门" prop="zbbm" required >
						<el-select v-model="dataForm.zbbm" :disabled="showji" placeholder="请选择主办部门" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zbbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="演练方式" prop="ylfs" required >
						<el-input v-model="dataForm.ylfs" :disabled="showji" placeholder="请输入演练方式" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急预案" prop="yjya" required >
						<el-select v-model="dataForm.yjya" :disabled="showji" placeholder="请选择应急预案" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in yjyaOptions" :key="index" :label="item.YAMC" :value="item.Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="演练级别" prop="yljb" required >
						<el-select v-model="dataForm.yljb" :disabled="showji" placeholder="请选择演练级别" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in yljbOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="计划开始日期" prop="jhdzrq" required >
						<el-date-picker v-model="dataForm.jhdzrq" :disabled="showji" placeholder="请选择计划开始日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="计划结束日期" prop="jhylrq" required >
						<el-date-picker v-model="dataForm.jhylrq" :disabled="showji" placeholder="请选择计划结束日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" @blur="timechang">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="计划定制人" prop="jhzdr" required >
						<el-select v-model="dataForm.jhzdr" :disabled="showji" placeholder="请选择计划定制人" clearable :style='{"width":"100%"}' filterable >
							<el-option v-for="(item, index) in jhzdrOptions" :key="index" :label="item.F_RealName" :value="item.F_Id " ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="bz" >
						<el-input v-model="dataForm.bz" :disabled="showji" placeholder="请输入备注" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="相关附件" prop="xgfj" >
						<JNPF-UploadFz v-model="xgfjList" :disabled="showji" accept="" :fileSize="20" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
		<el-col :span="24" v-if="isshow">
		<el-form-item label-width="0">
		<el-divider content-position="left">演练评价</el-divider>
		</el-form-item>
		</el-col>
				<el-col :span="12" v-if="isshow">
					<el-form-item label="实际演练日期" prop="sjylrq" >
						<el-date-picker v-model="dataForm.sjylrq" placeholder="请选择实际演练日期" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="isshow">
					<el-form-item label="主要参演人员" prop="zycyry" >
						<el-select v-model="dataForm.zycyry" placeholder="请选择主要参演人员" clearable :style='{"width":"100%"}' multiple filterable >
							<el-option v-for="(item, index) in zycyryOptions" :key="index" :label="item.F_RealName" :value="item.F_Id " ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="isshow">
					<el-form-item label="其它参演部门" prop="qtcybm" >
						<el-select v-model="dataForm.qtcybm" placeholder="请选择其它参演部门" clearable :style='{"width":"100%"}' multiple >
							<el-option v-for="(item, index) in qtcybmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="演练内容" prop="ylnr" >
						<el-input v-model="dataForm.ylnr" placeholder="请输入演练内容" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="演练目的" prop="ylmd" >
						<el-input v-model="dataForm.ylmd" placeholder="请输入演练目的" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="演练过程" prop="ylgc" >
						<el-input v-model="dataForm.ylgc" placeholder="请输入演练过程" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="演练小结" prop="ylxj" >
						<el-input v-model="dataForm.ylxj" placeholder="请输入演练小结" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="不足因素描述" prop="bzysms" >
						<el-input v-model="dataForm.bzysms" placeholder="请输入不足因素描述" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="是否整改" prop="sfzg" >
						<el-radio-group v-model="dataForm.sfzg" :style='{}' >
							<el-radio v-for="(item, index) in sfzgOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="评价意见" prop="pjyj" >
						<el-input v-model="dataForm.pjyj" placeholder="请输入评价意见" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="isshow">
					<el-form-item label="相关附件" prop="pjfj" >
						<JNPF-UploadFz v-model="pjfjList" accept="" :fileSize="20" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
		isshow:false,
		showji:false,
        dataForm: {
					ylmc:undefined,
					yldd:undefined,
					zbbm:undefined,
					ylfs:undefined,
					yjya:undefined,
					yljb:undefined,
					jhdzrq:undefined,
					jhylrq:undefined,
					jhzdr:undefined,
					bz:undefined,
					jhzt:undefined,
					xgfj:[],
					sjylrq:undefined,
					zycyry:[],
					qtcybm:[],
					ylnr:undefined,
					ylmd:undefined,
					ylgc:undefined,
					ylxj:undefined,
					bzysms:undefined,
					sfzg:"否",
					pjyj:undefined,
					pjzt:1,
					pjfj:[],

        },
        rules: {
						ylmc:[
						{
							required:true,
							message:'请输入演练名称',
							trigger:'blur'
						},
						],
						yldd:[
						{
							required:true,
							message:'请输入演练地点',
							trigger:'blur'
						},
						],
						zbbm:[
						{
							required:true,
							message:'请输入主办部门',
							trigger:'blur'
						},
						],
						ylfs:[
						{
							required:true,
							message:'请输入演练方式',
							trigger:'blur'
						},
						],
						yjya:[
						{
							required:true,
							message:'请输入应急预案',
							trigger:'blur'
						},
						],
						yljb:[
						{
							required:true,
							message:'请输入演练级别',
							trigger:'blur'
						},
						],
						jhdzrq:[
						{
							required:true,
							message:'请输入计划开始日期',
							trigger:'blur'
						},
						],
						jhylrq:[
						{
							required:true,
							message:'请输入计划结束日期',
							trigger:'blur'
						},
						],
						jhzdr:[
						{
							required:true,
							message:'请输入计划定制人',
							trigger:'blur'
						},
						],

        },
				zbbmOptions:[],
				yjyaOptions:[],
				yljbOptions:[{"fullName":"公司级","id":"公司级"},{"fullName":"分厂级","id":"分厂级"},{"fullName":"车间级","id":"车间级"}],
				jhzdrOptions:[],
				zycyryOptions:[],
				qtcybmOptions:[],
				sfzgOptions:[{"fullName":"否","id":"否"},{"fullName":"是","id":"是"}],

					xgfjList:[],
					pjfjList:[],

      }
    },
    created() {
		this.getZbbmOptions();
		this.getYjyaOptions();
		this.getJhzdrOptions();
		this.getZycyryOptions();
		this.getQtcybmOptions();

    },
	computed:{
                     
	},
    methods: {

		timechang(){
			if(this.dataForm.jhdzrq==undefined){
				this.$message('计划开始日期不能为空');
				return;
			}
			if(this.dataForm.jhdzrq>this.dataForm.jhylrq){
                  this.$message('计划结束日期要大于计划开始日期');
				  this.dataForm.jhylrq=undefined;
			}
		},

		getZbbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.zbbmOptions = res.data
			})
		},
		getYjyaOptions()
		{
			previewDataInterface('9428cb7c155941fea14dad00289acc7a').then(res => {
				this.yjyaOptions = res.data
			})
		},
		getJhzdrOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.jhzdrOptions = res.data
			})
		},
		getZycyryOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.zycyryOptions = res.data
			})
		},
		getQtcybmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.qtcybmOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
		if(id !=undefined){
           this.isshow=true;
		   this.showji=true;
		}
		
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/YJYLJH/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.xgfjList = this.dataForm.xgfj ? JSON.parse(this.dataForm.xgfj) : [];
				this.dataForm.zycyry = this.dataForm.zycyry ? this.dataForm.zycyry.split(','):[];
				this.dataForm.qtcybm = this.dataForm.qtcybm ? this.dataForm.qtcybm.split(','):[];
				this.pjfjList = this.dataForm.pjfj ? JSON.parse(this.dataForm.pjfj) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'xgfj', JSON.stringify(this.xgfjList));
				this.dataForm.zycyry = this.dataForm.zycyry.join(',');
				this.dataForm.qtcybm = this.dataForm.qtcybm.join(',');
				this.$set(this.dataForm, 'pjfj', JSON.stringify(this.pjfjList));

				let newdate=new Date();
				let newnumber=newdate.getTime();
				if(this.dataForm.jhdzrq>newnumber){
					 this.dataForm.jhzt=1
				}else if(this.dataForm.jhdzrq<=newnumber<=this.dataForm.jhylrq){
                    this.dataForm.jhzt=2
				}else{
					this.dataForm.jhzt=3
				}


        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/YJYLJH',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/YJYLJH/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>